<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">
<body>
<style>
    .right {
        float: right
    }

    .left {
        float: left
    }

    .active1 {
        border-bottom: 2px solid #005C34;
        color: #005C34
    }

    .spanChange:hover {
        cursor: pointer
    }

    .spanChange {
        font-size: 20px;
        margin: 0 30px
    }
</style>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div style="height: 40px">
        <p style="margin: 0px auto auto 380px; line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 我的订单</p>
    </div>
    <hr style="margin: 0 auto  ; width: 1200px"/>
    <section class="sec_1" style="background:#F7F7F7;padding-top: 0">
        <div class="div_1">
            <ul>
                <li><a href="/cultivate/my">个人资料</a></li>
                <li class="this"><a href="/cultivate/myOrder">我的订单</a></li>
                <li><a href="/cultivate/myCourse">我的课程</a></li>
                <li><a href="/cultivate/studyRecord">学习记录</a></li>
                <li><a href="/cultivate/myResume">我的简历</a></li>
                <li><a href="/cultivate/deliverRecord">投递记录</a></li>
                <li><a href="/cultivate/applyRecord">申请记录</a></li>
                <li><a href="/cultivate/myMessage">消息中心</a></li>
                <li><a href="/cultivate/myCertificates">我的证书</a></li>
                <li><a href="/certificate/mock?grade=2" target="_blank">幼儿照护初级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=1" target="_blank">幼儿照护中级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=0" target="_blank">幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <div class="div_2">
            <div style="margin:20px 0">
                <span data-type="0" class="active1 spanChange">已付款</span>
                <span data-type="1" class="spanChange">待付款</span>
            </div>
            <hr>
            <div id="news"></div>
            <div id="page0" style="display: none" class="page"></div>
            <div id="page1" style="display: none" class="page"></div>
        </div>
        <div style="clear: both"></div>
    </section>
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
</body>

<script>

    $(function () {
        $(".spanChange").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            list($(this).attr("data-type"));
        });
        list(0);
    });

    function list(state) {
        ajaxToken("/jzApi/courses/selMyCourseList", "GET", {
            current: 1,
            number: 8,
            state: state,
            t: new Date()//解决在IE11浏览器下,JQuery的AJAX方法第二次不响应问题,保证每次请求的参数都不相同
        }, function (res) {
            if (res.pages == 0) {
                $("#news").html('<div class="noData">暂无数据</div>');
            } else {
                var list = res.records;
                var news = '';
                list.forEach(function (item, index) {
                    // var a = '';
                    // var c = '';
                    // if (item.state == 0) {
                    //     a = '<span style="color: hotpink" id="state">已付款</span>';
                    // }
                    // if (item.state == 1) {
                    //     a = '<span style="color: blue" id="state">未付款</span>';
                    // }
                    // if (item.state == 2) {
                    //     a = '<span style="color: orange" id="state">正常</span>';
                    // }
                    // if (item.state == 3) {
                    //     a = '<span style="color: green" id="state">已退款</span>';
                    // }
                    // if (item.state == 4) {
                    //     a = '<span style="color: red" id="state">已到期</span>';
                    // }
                    // if (item.state == 9) {
                    //     a = '<span style="color: #2417ff" id="state">已删除</span>';
                    // }
                    var b = '';
                    if (item.type == 0) {
                        b = '证书课程'
                    } else if (item.type == 1){
                        b = '师资培训课程'
                    } else if (item.type == 2){
                        b = '考评员培训课程'
                    } else if (item.type == 3){
                        b = '高级师资培训课程'
                    } else if (item.type == 4){
                        b = '高级考评员培训课程'
                    }
                    news += '<a target="_blank" href="/couInfo/courseSurePay?orderId=' + item.orderId + '&courseId=' + item.id + '&type=1"><div class="my_bg div_01">' +
                        '<div class="left"><img style="width:130px;height:105px;" src="' + item.thumbnail + '"></div>' +
                        '<div class="left" style="margin-left: 20px">' +
                        '<div><span class="title_1">课程名称：</span><p id="type" class="title_2">' + item.name + '</p></div>' +
                        '<div><span class="title_1">课程类型：</span><p class="title_2">' + b + '</p></div>' +
                        '<div><span class="title_1">讲师姓名：</span><p class="title_2">' + item.teacherName + '</p></div>' +
                        '</div>' +
                        '<div class="right">' +
                        '<div><span class="title_1" style="color:#fe7252">查看订单详情</span></div>' +
                        '</div><div style="clear: both"></div>' +
                        // c +
                        '</div></a>';

                });
                $("#news").html(news);
                page(1, res.pages, state);
            }
        })
    }

    function page(num, tolPages, state) {
        var a = '';
        if (state == 0) {
            a = '#page0';
            $("#page0").show();
            $("#page1").hide();
        } else {
            a = '#page1';
            $("#page0").hide();
            $("#page1").show();
        }
        $(a).paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 3, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                ajaxToken("/jzApi/courses/selMyCourseList", "GET", {
                    current: num,
                    number: 8,
                    state: state,
                    t: new Date()//解决在IE11浏览器下,JQuery的AJAX方法第二次不响应问题,保证每次请求的参数都不相同
                }, function (res) {
                    var list = res.records;
                    var news = '';
                    list.forEach(function (item, index) {
                        // var a = '';
                        // var c = '';
                        // if (item.state == 0) {
                        //     a = '<span style="color: hotpink" id="state">已付款</span>';
                        // }
                        // if (item.state == 1) {
                        //     a = '<span style="color: blue" id="state">未付款</span>';
                        // }
                        // if (item.state == 2) {
                        //     a = '<span style="color: orange" id="state">正常</span>';
                        // }
                        // if (item.state == 3) {
                        //     a = '<span style="color: green" id="state">已退款</span>';
                        // }
                        // if (item.state == 4) {
                        //     a = '<span style="color: red" id="state">已到期</span>';
                        //     /*c = '<div style="display: flex;justify-content: space-between">' +
                        //         '<div class="span_1" style="flex: 6"><span class="title_1">备注：</span><p style="color: red" class="title_2">' + item.remark + '</p></div>' +
                        //         '<div class="span_1" style="flex: 2;margin-top: 4px"><a href="#" class="my_btn" style="flex: 1;text-align: center;padding:2px 10px" onclick="edit(\'' + item.id + '\')" >修改</a></div>' +
                        //         '</div>'*/
                        // }
                        // if (item.state == 9) {
                        //     a = '<span style="color: #2417ff" id="state">已删除</span>';
                        // }
                        var b = '';
                        if (item.type == 0) {
                            b = '证书课程'
                        } else if (item.type == 1){
                            b = '师资培训课程'
                        } else if (item.type == 2){
                            b = '考评员培训课程'
                        } else if (item.type == 3){
                            b = '高级师资培训课程'
                        } else if (item.type == 4){
                            b = '高级考评员培训课程'
                        }
                        news += '<a target="_blank" href="/cultivate/myOrderDetail?orderId=' + item.orderId + '&courseId=' + item.id + '"><div class="my_bg div_01">' +
                            '<div class="left"><img style="width:130px;height:105px;" src="' + item.thumbnail + '"></div>' +
                            '<div class="left" style="margin-left: 20px">' +
                            '<div><span class="title_1">课程名称：</span><p id="type" class="title_2">' + item.name + '</p></div>' +
                            '<div><span class="title_1">课程类型：</span><p class="title_2">' + b + '</p></div>' +
                            '<div><span class="title_1">讲师姓名：</span><p class="title_2">' + item.teacherName + '</p></div>' +
                            '</div>' +
                            '<div class="right">' +
                            '<div><span class="title_1" style="color:#fe7252">查看订单详情</span></div>' +
                            '</div><div style="clear: both"></div>' +
                            // c +
                            '</div></a>';
                    });
                    $("#news").html(news);
                });
            }
        });
    }

</script>
</html>